<template>
  <div>
    <div id="map" style="height: 100vh; width: 100vw;"></div>
    <div v-if="coordinates" style="position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 5px;">
      <strong>经度:</strong> {{ coordinates.lng.toFixed(5) }} <strong>纬度:</strong> {{ coordinates.lat.toFixed(5) }}
    </div>
    <div v-if="alertMessage" style="position: absolute; top: 20px; left: 10px; background: rgba(135, 206, 250, 0.9); padding: 10px; border-radius: 5px;font-size: 20px;font-family: 'Microsoft YaHei', sans-serif;">
      <span v-html="alertMessage"></span>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'; // 导入 xlsx 库

export default {
  name: 'MapComponent',
  data() {
    return {
      map: '',
      mapZoom: 14, // 默认情况下的地图缩放级别
      coordinates: null,
      shipMarkers: [],
      shipsData: [], // 初始化为空数组
      alertMessage: null // 用于存储提示信息
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap(); // 初始化地图
      this.loadData(); // 加载数据
      // this.toggleFullScreen(); // 启动全屏模式
    });
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map'); // 创建新的地图实例
      this.map.centerAndZoom(new BMap.Point(113.084648, 22.215905), this.mapZoom); // 在指定坐标中心化地图
      this.map.setCurrentCity('西江'); // 设置当前城市
      this.map.enableScrollWheelZoom(true); // 启用滚轮缩放
      this.map.enableContinuousZoom(true); // 启用连续缩放
    },
    addShipMarkers() {
      // 按照时间排序船舶数据
      this.shipsData.sort((a, b) => new Date(a.GPS_TIME) - new Date(b.GPS_TIME));

      const points = []; // 存储经纬度点
      const shipIcon = new BMap.Icon("/files/ship-icon.png", new BMap.Size(32, 32)); // 替换为你的船的logo路径，设置图标大小

      this.shipsData.forEach(ship => {
        const point = new BMap.Point(ship.LON, ship.LAT); // FIX_X 为经度，FIX_Y 为纬度
        points.push(point); // 将点添加到数组中

        const shipMarker = new BMap.Marker(point, { icon: shipIcon }); // 为船舶创建带有自定义图标的标记
        this.map.addOverlay(shipMarker); // 将标记添加到地图上
        this.shipMarkers.push(shipMarker); // 将标记存储到 shipMarkers 数组中

        // 为标记添加点击事件
        shipMarker.addEventListener('click', () => {
          this.showAlert(`经度: ${ship.LON}<br>纬度: ${ship.LAT}<br>`); // 弹出提示框显示经纬度和时间信息
        });
      });

      // // 绘制连接线
      // if (points.length > 1) {
      //   const polyline = new BMap.Polyline(points, {
      //     strokeColor: "blue", // 线条颜色
      //     strokeWeight: 2, // 线条宽度
      //     strokeOpacity: 0.5 // 线条透明度
      //   });
      //   this.map.addOverlay(polyline); // 将连接线添加到地图上
      // }
    },
    loadData() {
      const filePath = '/files/查询AIS数据for桂林理工.xlsx'; // 相对路径
      fetch(filePath)
        .then(response => {
          if (!response.ok) {
            throw new Error('网络响应不正常');
          }
          return response.arrayBuffer();
        })
        .then(data => {
          try {
            const workbook = XLSX.read(data, {type: 'array'}); // 读取 Excel 数据
            const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个工作表

            if (!worksheet) {
              throw new Error('未找到工作表');
            }

            const jsonData = XLSX.utils.sheet_to_json(worksheet); // 将工作表转换为 JSON 数据

            console.log('加载的数据:', jsonData); // 添加调试信息

            // 清空当前的船舶数据
            this.shipsData = [];

            // 遍历 JSON 数据并添加到 shipsData
            jsonData.forEach(item => {
              this.shipsData.push({
                LON: item['LON（经度）']/1000000, // 根据标签名取出经度
                LAT: item['LAT（纬度）']/1000000, // 根据标签名取出纬度
                NAME: item['NAME'], // 船舶名称
                LENGTH: item['LENGTH（长度）'], // 船舶长度
                WIDTH: item['WIDTH（宽度）'], // 船舶宽度
                DRAFT: item['DRAUGHT'], // 吃水
                DESTINATION: item['DEST（目的地）'], // 目的地
                HEADING: item['HDG'], // 航向
                COASTAL_TRACK_ANGLE: item['COG'], // 对地航迹角
                GROUND_SPEED: item['SOG'], // 对地速度
                GPS_TIME: this.formatExcelDate(item['LASTTIME']), // 转换时间格式
              });
            });

            // 添加船舶标记到地图
            this.addShipMarkers();
          } catch (error) {
            console.error('解析 Excel 文件时出错:', error);
          }
        })
        .catch(error => console.error('加载文件时出错:', error));
    },
    // formatExcelDate(excelDate) {
    //   // 将 Excel 日期格式转换为可读的日期字符串
    //   const date = new Date((excelDate - 25569) * 86400 * 1000); // Excel 日期转换为 JavaScript 日期
    //   return date.toLocaleString(); // 返回本地化的日期字符串
    // },
    showAlert(message) {
      this.alertMessage = message; // 设置提示信息
    },
    toggleFullScreen() {
      const mapElement = document.getElementById('map');
      if (mapElement.requestFullscreen) {
        mapElement.requestFullscreen();
      } else if (mapElement.mozRequestFullScreen) { // Firefox
        mapElement.mozRequestFullScreen();
      } else if (mapElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
        mapElement.webkitRequestFullscreen();
      } else if (mapElement.msRequestFullscreen) { // IE/Edge
        mapElement.msRequestFullscreen();
      }
    }
  }
};
</script>

<style>
.anchorBL {
  display: none; /* 隐藏锚点 */
}

#map {
  position: relative; /* 设置地图的相对定位 */
  height: 100vh; /* 设置高度为视口高度 */
  width: 100vw; /* 设置宽度为视口宽度 */
}
</style>
